Atomic Design
https://qiita-image-store.s3.amazonaws.com/0/11290/ba5734c3-0fe1-0aae-1b1c-0cd28e05abe9.png
Atom
最小単位
ボタンとか、アイコンとか
Molecule
Atomを組み合わせて作られる要素
単一の機能を持つ
Organism
HeaderとかFooterがよく例に挙げられる
Moleculeとの違いがわからなくなる
Moleculeと異なり複数の役割を持つ
Template
ワイヤーフレーム
Page
実際のデータを注入するところ
Oranigms, Template, Pageは 機能ではなくレイアウトとしての役割を持つ？ref 「機能としての役割」はそれ以下のもので完結させる
なのでこれら3つは、レイアウトに関する単一責任を持つ、のか
スタイルの話
見た目のスタイル
小さいコンポーネント一つ一つの見た目
例えばボタンとか？
レイアウトのスタイル
配置や、子に対する見た目
再利用性を高めるための2つの制限
子は親の"レイアウトのスタイル"を知ってはならない
子はmarginなどを持つな
親は子の"見た目のスタイル"を知ってはならない
Viewだからやりづらい、というのはある
が、「絶対にここのfeatureでしか使わないだろ」というのをmoleculesとかに入れる意味はないと思うmrsekut.icon
packages/とcommons/を作って、後者の中をatomic designにしたりすればいいのでは？
実装
拡張
UIを基準にではなく、依存関係を軸にレイヤーを分ける
rinciples、Basics、Components、Templates、Features、Applications
Identity、Elements、Components、Compositions、Layout、Pages
分類しない(?)
atoms, helpers, standalone, template, pages
科学的なメタファーではなく音楽のメタファーを使う
ハーモニー、メロディ、リズム
アクセシビリティの観点で粒度を分ける
そのテスト
参考
様々なatomic design拡張の紹介